Chrome 108 ：发布新的 CSS 布局单位！

大家好，我是 ConardLi。

在最近发布的 Chrome 108 中，带来了几个新的 CSS 视口单位，下面我带大家一起来看一下：

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等 — 即指你正在浏览的文档的那一部分。

一般我们提到的视口有三种：布局视口、视觉视口、理想视口，在我之前写的下面这篇文章中详细介绍了视口相关的概念和原理看兴趣可以看：

在响应式布局中，我们经常会用到两个视口相关的单位：

• vw(Viewport's width)：1vw 等于视觉视口的 1%
• vh(Viewport's height) : 1vh 为视觉视口高度的 1%

另外还有两个相关的衍生单位：

• vmin : vw 和 vh 中的较小值
• vmax : 选取 vw 和 vh 中的较大值

如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh，它将完全覆盖视觉视口：

这些单位有很好的浏览器兼容性，也在桌面端布局中得到了很好的应用。

但是，在移动设备上的表现就差强人意了，移动设备的视口大小会受动态工具栏（例如地址栏和标签栏）存在与否的影响。视口大小可能会更改，但 vw 和 vh 的大小不会。因此，尺寸过大的 100vh 元素可能会从视口中溢出。

当网页向下滚动时，这些动态工具栏可能又会自动缩回。在这种状态下，尺寸为 100vh 的元素又可以覆盖整个视口。

为了解决这个问题，CSS 工作组规定了视口的各种状态。

• Large viewport（大视口）：视口大小假设任何动态工具栏都是收缩状态。
• Small Viewport（小视口）：视口大小假设任何动态工具栏都是扩展状态。

新的视口也分配了单位：

• 代表 Large viewport 的单位以 lv 为前缀：lvw、lvh、lvi、lvb、lvmin、lvmax。
• 代表 Small Viewport 的单位以 sv 为前缀：svw、svh、svi、svb、svmin、svmax。

除非调整视口本身的大小，否则这些视口百分比单位的大小是固定的。

除了 Large viewport 和 Small Viewport ，还有一个  Dynamic viewport（动态视口）

• 当动态工具栏展开时，动态视口等于小视口的大小。
• 当动态工具栏被缩回时，动态视口等于大视口的大小。

相应的，它的视口单位以 dv 为前缀：dvw, dvh, dvi, dvb, dvmin, dvmax。

目前，各大浏览器均已经对新的视口单位提供了支持：

最后

参考链接：

• https://web.dev/viewport-units/
• https://www.w3.org/TR/css-values-4/#viewport-relative-lengths

往期相关推荐：

如果这篇文章帮助到了你，欢迎点赞和关注。

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

抖音安全团队正在招聘前端，感兴趣请查看：抖音安全团队招聘前端工程师

点赞和在看是最大的支持⬇️❤️⬇️